<script setup lang="ts">
import UserInformation from '@/components/UserInformation.vue'
import ScreenResult from '@/views/topic/ScreenResult.vue'
import ResultItems from '@/views/topic/ResultItems.vue'
import { useRoute } from 'vue-router'
import { getCheckPerson } from '@/api/wechat/checkperson'
import { onMounted, ref } from 'vue'
import type { CheckPerson } from '@/api/types'

const route = useRoute()
const checkPersonInfo = ref<CheckPerson>({})
const checkId = route.query.checkPersonId
const onClickLeft = () => history.back()

const getCheckPersonInfo = (id) => {
  getCheckPerson(id).then((res) => {
    checkPersonInfo.value = res.data
  })
}

onMounted(() => {
  getCheckPersonInfo(checkId)
})
</script>

<template>
  <div>
    <div class="topic-bg">
      <!--      顶部导航栏-->
      <van-nav-bar
        left-arrow
        @click-left="onClickLeft"
        :style="{ background: '#09dfc7', color: 'white' }"
      >
        <template #title>
          <span style="color: white">个人信息</span>
        </template>
        <template #left>
          <div>
            <van-icon name="arrow-left" color="white" />
            返回
          </div>
        </template>
      </van-nav-bar>
      <!--      个人信息-->
      <div class="user-info">
        <user-information :username="checkPersonInfo.name">
          <template #option>
            <van-button style="background-color: #0fcfae" type="success" round size="small">
              修改个人信息
            </van-button>
          </template>
        </user-information>
      </div>
      <!--    TST结果-->
      <div class="result-items">
        <result-items>
          <template #icon>
            <van-icon name="todo-list-o" />
          </template>
          <template #content> 你好你好</template>
        </result-items>
      </div>
      <!--      筛查结果-->
      <div>
        <screen-result :check-id="checkId" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
$bg-color: #09dfc7;
.topic-bg {
  background: $bg-color;
  height: 110vh;
}

.user-info {
  margin-top: 50px;
}
</style>
